<template>
  <div id="myChart" :style="{width: '1500px', height: '500px'}"></div>
</template>
<script>
  import {
    ListHots
  } from "@/api/film";
  export default {
    name: 'show',
    data() {
      return {
        total: []
      }
    },
    mounted() {
      //获取热门电影      
      ListHots().then(res => {
        this.total = res.data
        console.log("tolist==", this.total);
      })
      setTimeout(() => {
        this.drawLine()
      }, 100)
    },
    methods: {
      drawLine() {
        //  let hotlist=[]
        //  let movielist=[]
        let hotlist = this.total.map((item) => item.hot)
        let movielist = this.total.map(item => item.name)

        console.log(hotlist);
        console.log(movielist);
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          barWidth:40,
          title: {
                text: '电影热度top10展示'
            },
        
         tooltip: {},
          legend: {
                data:['热度']
          },
          xAxis: {
            type: 'category',
            data: movielist
          },
          yAxis: {
            type: 'value'
          },
          series: [{
             itemStyle:{
          color:"#72C0DE"
         },
            data: hotlist,
            type: 'bar',

            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }]
        });
      }
    }
  }
</script>


<style scoped>
  #myChart {
    margin-top: 100px;
    
  }
</style>